<template>
  <el-dialog
      v-model="dialogVisible"
      :title="dataForm.workPlanId==null?'新增':'修改'"
      width="550"
      :close-on-click-modal="false"
  >


    <el-form label-width="80px" :model="dataForm" :rules="rules" ref="planRef">


      <el-form-item label="出诊医生" prop="doctorId">
        <el-select style="width: 50%" v-model="dataForm.doctorId" :disabled='dataForm.workPlanId!=null'>
          <el-option
              v-for="item in DoctorOptions"
              :key="item.id"
              :value="item.id"
              :label="item.name"
          >

          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="出诊时间">
        <div style="width: 100%">
          <el-checkbox v-model="checkAll" @change="checkAllChange" label="全选"/>
        </div>
        <div style="width: 100%">
          <el-checkbox-group v-model="checkList">
            <el-checkbox
                v-for="(item,index) in slotList"
                :key="index"
                :label="item"
                :disabled="checkBoxDisbale(index+1)"
            />
          </el-checkbox-group>
        </div>
      </el-form-item>

      <el-form-item label="时段人数">
        <!-- show-input： 带输入框的滑块 -->
        <!-- min  最小值 -->
        <!-- max  最大值 -->
        <el-slider :min="1" :max="10" v-model="dataForm.slotMaximum" show-input :disabled="dataForm.workPlanId!=null"/>
      </el-form-item>

    </el-form>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="insertPlan">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive, onMounted, nextTick} from "vue";
import {selectDeptAndSub} from "@/api/dept/index.js";
import {deptSubDoctor} from "@/api/care"
import {insertDoctorPlan, selectPlanByPlanId,updateDoctorPlan} from "@/api/visit"
import dayjs from "dayjs";
import {ElMessage} from "element-plus";

// 默认值是false  默认隐藏
let dialogVisible = ref(false)

let oldslots = ref([]);

// 打开对话框
const init = (workPlanId, deptSubId, date) => {

  dataForm.value.workPlanId = workPlanId;

  // 每次打开对话框都重置表单
  resetForm()

  // 接受 两个参数
  dataForm.value.deptSubId = deptSubId;
  dataForm.value.date = date;
  // 显示对话框
  dialogVisible.value = true;

  // 因为是 js 是异步执行的 可能页面没有构建完成就已经执行函数了 所以要保证 在页面构建完成之后执行
  nextTick(async () => {
    searchDoctor();
    // 根据 workPlanId 判断是否是修改功能
    if (workPlanId != null) {
      // 如果是修改功能 要调用接口 获取信息
      let data = {
        workPlanId: workPlanId
      }
      let res = await selectPlanByPlanId(data);
      console.log(res)
      dataForm.value.doctorId = res.result.doctorId;
      dataForm.value.slotMaximum = res.result.maximum;
      oldslots.value = res.result.slots;

      for (let one of res.result.slots) {
        // 接口返回的 slot 是从 1 开始的 但是 数组是从 0 开始的 所以要 -1
        let slot = slotList[one.slot - 1];
        checkList.value.push(slot);
      }

    }
  });
};

// 导出子组件的 dialogVisible 让父组件能够控制
defineExpose({init})

// 判断复选框禁用状态
const checkBoxDisbale = (slot) => {
  // find 方法 遍历数组 如果有符合条件的元素 则 返回元素
  // 否则 返回 undefined
  let temp = oldslots.value.find(one => {
    // 对选中时段 和 复选框按钮对应 并且 患者挂号数量大于0
    return one.slot == slot && one.num > 0;
  });
  // 如果有返回值 说明 某个时间段已经有挂号了  return 返回 true 禁用时间段
  // 如果是 undefiend 说明没有人挂号  return 返回的是 false  不禁用
  return typeof temp != 'undefined';
};

const dataForm = ref({
  // 定义 workPlanId  有值就是修改 null 就是新增
  "workPlanId": null,
  "deptSubId": '',
  "doctorId": '',
  "date": dayjs().format("YYYY-MM-DD"),         // 出诊日期
  "totalMaximum": 0,  // 出诊人数最大限制   (时段人数 * 出诊时段)
  "slotMaximum": 3,   // 时段人数
  "slots": []          // 出诊时段   --  时间段对应的 数值

})

let slotList = [
  '08:00~08:30',  // 1
  '08:30~09:00',
  '09:00~09:30',
  '09:30~10:00',
  '10:00~10:30',
  '10:30~11:00',
  '11:00~11:30',
  '11:30~12:00',
  '13:00~13:30',
  '13:30~14:00',
  '14:00~14:30',
  '14:30~15:00',
  '15:00~15:30',
  '16:00~16:30',
  '16:30~17:00',
]
// 新增校验规则
let rules = reactive({
  /*  deptSubId: [
      {required: true, message: '请选择科室部门'}
    ],*/
  doctorId: [
    {required: true, message: '请选择出诊医生'}
  ]
})

// el-form 组件的实例化对象
let planRef = ref();

let emit = defineEmits(['queryPlan'])

// 添加计划 // 修改计划
const insertPlan = async () => {
  // 查看 planRef 这个 Dom 对象是否存在 几乎一直存在  这个几乎不会执行  除了特殊错误
  if (!planRef.value) return

  await planRef.value.validate(async (valid, fields) => {
    if (valid) {
      // 出诊时间段校验
      if (checkList.value.length == 0) {
        ElMessage({
          type: 'warning',
          message: '出诊时间段没有选择',
        });
        return
      }

      // 这个 if 里面是新增的功能实现
      if (dataForm.value.workPlanId == null) {
        // 调整传参的 dataForm 对象
        // 每次点击确定时 将dataForm表单中的 slots 置为空
        dataForm.value.slots = [];

        for (let one of checkList.value) {
          let index = slotList.indexOf(one) + 1;
          dataForm.value.slots.push(index);
        }

        // 表单对象当作参数时的格式处理
        dataForm.value.totalMaximum = dataForm.value.slotMaximum * dataForm.value.slots.length;
        // 这个 deptSubId 不是从级联选择器中获得的 父组件传来的就是 数值 不用 转格式
        // dataForm.value.deptSubId = dataForm.value.deptSubId[1];
        // console.log(dataForm.value.slots)
        // 调用添加接口

        let res = await insertDoctorPlan(dataForm.value);
        console.log(res);
        // 关闭对话框
        // 调用一下父组件中的查询方法
        // 给个提示消息
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: '添加成功',
          });
          // 关闭 form 表单
          dialogVisible.value = false;
          // 调用父组件查询方法
          emit('queryPlan');

        } else {
          ElMessage({
            type: 'warning',
            message: '添加失败'
          })
        }

        // else 里面是修改的代码实现
      } else {

        // 每次点击确定时 将dataForm表单中的 slots 置为空
        dataForm.value.slots = [];


        for (let one of checkList.value) {
          // 在所有的时间段中查询 one 是否存在 若存在 返回 索引地址+1
          let index = slotList.indexOf(one) + 1;
          dataForm.value.slots.push(index);
        }

        // 记录 要添加的时段对象 或者 要删除的时段对象
        let array = []

        // 判断是不是要 新增 的时间段
        for (let one of dataForm.value.slots) {
          let temp = oldslots.value.find(old => {
            return one == old.slot;
          });
          // 判断是不是要新增的时间段
          if (typeof temp == 'undefined') {
            array.push({
              scheduleId: null,
              slot: one,
              maximum: dataForm.value.slotMaximum,
              operate: 'insert',
            })
          }
        }

        //判断是不是要 删除 的时间段
        for (let old of oldslots.value) {
          let temp = dataForm.value.slots.find(one => {
            return one == old.slot;
          });
          // 判断是不是要删除的时间段
          if (typeof temp == 'undefined') {
            array.push({
              scheduleId: old.scheduleId,
              slot: old.slot,
              maximum: dataForm.value.slotMaximum,
              operate: 'delete',
            })
          }
        }

        // 如果没有新增也没有删除 就弹出提示消息 没必要发起修改请求
        if (array.length == 0) {
          ElMessage({
            type: 'warning',
            message: '未修改时间段'
          });
          return;
        }

        // 请求参数处理
        let data = {
          workPlanId: dataForm.value.workPlanId,
          maximum: checkList.value.length * dataForm.value.slotMaximum,
          slots:array
        }

        // 调用修改接口
        let res = await updateDoctorPlan(data);
        ElMessage({
          type: 'success',
          message: '修改成功',
          duration: 1200,
        })

        dialogVisible.value = false;
        // 调用父组件 重新查询
        emit('queryPlan');
      }

    } else {
      console.log('校验失败', fields)
    }
  })
};

// 清空表单
const resetForm = () => {
  if (!planRef.value) return
  planRef.value.resetFields()  //重置该表单项，将其值重置为初始值，并移除校验结果
  checkAll.value = false // 全选框 选中状态默认为false
  checkList.value = [] // 复选框组默认未选中
  //   重置表单时  表单中由 prop 属性的会自己重置 没有 prop 属性的需要手动重置
  dataForm.value.slotMaximum = 3;    // 时段人数默认3人
  dataForm.value.date = dayjs().format('YYYY-MM-DD'); // 出诊日期默认当前默认系统时间
};


// 医生选中的出诊时间数组    复选框  一组使用时  绑定的内容值是 以数组的形式收集所有选中的复选框的值
let checkList = ref([])
// 出诊时间全选反选 复选框  单独使用时    绑定的内容值是   选中为true 不选中为false
let checkAll = ref(false);

const checkAllChange = () => {
  if (!checkAll.value) {
    checkList.value = [];
  } else {
    checkList.value = slotList;
  }
}


// 用来渲染科室部门级联选择器的数据
let options = ref([])


// 遍历门诊医生下拉菜单的数据
let DoctorOptions = ref([]);


// 查询门诊下医生信息
const searchDoctor = async () => {
  // console.log(dataForm.value.deptSubId[1]);

  let data = {
    deptSubId: dataForm.value.deptSubId
  }

  let res = await deptSubDoctor(data);
  // console.log(res);
  DoctorOptions.value = res.result
  // console.log(DoctorOptions);


};


</script>
<style scoped>

</style>